<template>
  <div id="login-page">
    <div class="page-title page-title-white" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
      <span>可可商户登录</span>
    </div>
    <div id="logo"></div>
    <el-form class="form login-form" label-width="100px" :model="form" :rules="rules" ref="ruleForm" size="medium">
      <el-form-item label="商户编号" prop="number">
        <el-col :span="20">
          <el-input
            placeholder="请输入 商户编号"
            v-model.trim="form.number"
            :maxlength="10"
            @keyup.enter.native="submit"
            clearable>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="账号" prop="username">
        <el-col :span="20">
          <el-input
            placeholder="请输入 账号"
            v-model.number="form.username"
            :maxlength="30"
            @keyup.enter.native="submit"
            clearable>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-col :span="20">
          <el-input
            show-password
            type="password"
            placeholder="请输入 密码"
            :maxlength="30"
            v-model="form.password"
            @keyup.enter.native="submit"
            clearable>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="验证码" prop="verify">
        <el-col :span="13">
          <el-input
            placeholder="请输入验证码"
            v-model.trim="form.verify"
            :maxlength="6"
            @keyup.enter.native="submit"
            clearable>
          </el-input>
        </el-col>
        <el-col :span="10">
          <img class="verfiyImg" ref="verfiyImg" title="点击刷新"
               :src="verifyImgSrc"
               @click="reflshVerifyImg"
               alt="">
        </el-col>
      </el-form-item>
      <el-form-item label-width="0px" align="center">
        <el-button type="primary" id="login-submit-button" @click="submit()" :loading="isLoading" :disabled="!isAgree">
          登录
        </el-button>
        <div>
          <my-privacy-agreement :callback="setIsAgree"/>
        </div>
        <!--        <div id="login-submit-button-bottom-box">-->
        <!--          <div class="left">-->
        <!--            <a href="javascript:void(0)" @click="$router.push('/Register')">前去注册</a>-->
        <!--          </div>-->
        <!--          <div class="right">-->
        <!--            <a href="javascript:void(0)" @click="$router.push('/ResetPassword')">忘记密码?</a>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--        <el-button type="success" @click="$router.push('/Register')">无账号，前去注册</el-button>-->
      </el-form-item>
    </el-form>


  </div>
</template>

<script>
import MyPrivacyAgreement from '../common/MyPrivacyAgreement'

export default {
  name: 'Login',
  components: {MyPrivacyAgreement},
  mounted: function () {
    if (typeof this.CurrUser.IsLogin === 'function' && this.CurrUser.IsLogin()) {
      this.$router.push('/')
    }
    // 非开发环境,清除数据
    this.form.number = '091200001'
    this.form.username = 'admin'
    this.form.password = 'a123456'

    this.reflshVerifyImg()

    let $this = this
    $this.bus.$on('MyPrivacyAgreementCallBus', function () {
      if (localStorage.getItem('MyPrivacyAgreement') === '1') {
        $this.isAgree = true
      } else {
        $this.isAgree = false
      }
      $this.$forceUpdate()
    })
  },
  destroyed() {
    this.bus.$off('MyPrivacyAgreementCallBus')
  },
  data: function () {
    let $this=this
    var checkUserName1 = function (rule, value, callback) {
      if ($this.checkUserName(value)) {
        callback()
      } else {
        callback(new Error('账号 必须是有(A-Za-z0-9)长度在(2~30)位'))
      }
    }
    return {
      isAgree: false,
      isLoading: false,
      form: {
        number: '',
        username: '',
        password: '',
        verify: ''
      },
      currVerifyImgSrc: this.ApiDoNameAuth + 'Verify/createImage?eventType=login&deviceId=' + this.GetDeviceID(),
      verifyImgSrc: '',
      rules: {
        number: [
          {required: true, message: '请输入 店铺编号', trigger: ['blur', 'change']},
          {min: 8, message: '长度在 8 个字符以上', trigger: ['blur', 'change']}
        ],
        username: [
          {required: true, message: '请输入 账号', trigger: ['blur', 'change']},
          {validator: checkUserName1, trigger: ['blur', 'change']},
        ],
        password: [
          {required: true, message: '请输入 密码', trigger: ['blur', 'change']},
          {min: 6, max: 30, message: '密码 长度在 6~30 之间', trigger: ['blur', 'change']}
        ],
        verify: [
          {required: true, message: '请输入 验证码', trigger: ['blur', 'change']},
          {min: 4, max: 4, message: '验证码 填写错误', trigger: ['blur', 'change']}
        ]
      }
    }
  },
  methods: {
    setIsAgree: function (isAgree) {
      this.isAgree = isAgree
      this.$forceUpdate()
    },
    // 刷新验证码
    reflshVerifyImg: function () {
      this.verifyImgSrc = this.currVerifyImgSrc + '&v=' + Math.random()
      this.form.verify = ''
    },
    // 提交
    submit: function () {
      var $this = this
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          $this.isLoading = true
          $this.MyRequest($this.ApiDoNameAuth + 'Public/login', {
            number: $this.form.number,
            username: $this.form.username,
            password: $this.form.password,
            imageVerifyCode: $this.form.verify,
          }, function (data) {
            $this.isLoading = false
            $this.CurrUser.setCache({
              token: data.token,
              username: $this.form.username,
              number: $this.form.number,
            })
            $this.getInfo(function () {
              $this.bus.$emit('UserLoginCallBus')
              $this.$router.push('/MemberHome')
            })

            // location.href='/'
          }, function (data) {
            $this.isLoading = false
            $this.successTip(data.message, 'error')
            // $this.form.password = ''
            $this.reflshVerifyImg()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    getInfo: function (callback) {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Shop/info', {}, function (data) {
        // RoleTools.cacheAction()
        localStorage.setItem("TINY_ROLE__ACTION_LIST", data.role.actionArr)
        callback()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
    },

    // 重置表单
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    register: function () {
      // this.$alert('请联系向: 623862474@qq.com 发送邮件进行注册。')
    },
  }
}
</script>

<style scoped>

</style>
